<template>
	<view class="container" style="font-size: 12px;">
		<view class="back-btn yticon icon-zuojiantou-up" @click="navBack"></view>
		<view class="wrapper">
			<image src="/static/icon/yumi_logo_icon.png" class="logoImg" mode=""></image>
			<view class="tabsContent" v-if="inType == 'regist'">
				<myTab :tabs="tabs" :acctive="1" border='#f35d1d' @tabClick="tabChange" acctiveText></myTab>
			</view>
			<view class="inputRow" v-if="inType=='forget'||inType=='regist' || inType =='reset'">
				<text class="invokeLable">手机号码</text>
				<view class="inputContain">
					<input type="number" @input='inputBlur' data-name="phone" :value="phone" placeholder="请输入您的手机号码" />
				</view>
			</view>
			<view class="codeSendCon">
				<view class="sendcode" style="font-size:12px" @click="sendValide">发送验证码</view>
			</view>
			<view class="inputRow" v-if="inType=='forget'||inType=='regist'">
				<text class="invokeLable">验证码</text>
				<view class="invokeInput">
					<input @input="inputBlur" data-name="code" placeholder="请输入当验证码" :value="code" />
				</view>
			</view>
			<view class="inputRow" v-if="inType=='reset'">
				<text class="invokeLable">旧密码</text>
				<view class="invokeInput">
					<input type="password" @input="inputBlur" data-name="oldPwd" placeholder="请输入当前密码" :value="oldPwd" />
				</view>
			</view>
			<view class="inputRow " v-if="inType=='forget' || inType=='reset' ||inType=='regist'">
				<text class="invokeLable">登陆密码</text>
				<input type="password" class="invokeInput" @input="inputBlur" :value="newPwd" data-name="newPwd" placeholder="请输入密码"></input>
			</view>
			<view class="inputRow " v-if="inType=='forget'|| inType=='reset' ||inType=='regist'">
				<text class="invokeLable">确认密码</text>
				<input class="invokeInput" @input="inputBlur" type="password" :value="again" data-name="again" placeholder="请输入确认密码"></input>
			</view>
			<view class="inputRow " v-if="inType=='regist'">
				<text class="invokeLable">邀请码</text>
				<input class="invokeInput" v-model="Invitation_code" :disabled="isdisbale" placeholder="请输入邀请码"></input>
			</view>
			<view class="confirmBtm" @click="confirm">
				提交
			</view>

      <view class="back" @click="navBack">返回</view>
		</view>

	</view>
</template>

<script>
	import myTab from "@/components/scrollTab/scrollTab.vue"
	import {
		sendValidaCode
	} from '@/common/loadUserInfo.js'
	export default {
		components: {
			myTab
		},
		data() {
			return {
				isdisbale: false,
				tabs: ['登陆', '注册'],
				inType: '',
				oldPwd: '',
				phone: '',
				phoneValide: false,
				code: '',
				codeValide: false,
				responseCode: false,
				allow: true,
				countDown: 60,
				allowLogin: true,
				newPwd: '',
				again: '',
				Invitation_code: '',
			};
		},
		onLoad(option) {
			if (option.type) {
				this.inType = option.type
				if (this.inType == 'reset') {
					uni.setNavigationBarTitle({
						title: '重置密码'
					})
				} else {
					if (this.inType == 'regist') {
						uni.setNavigationBarTitle({
							title: '注册'
						})
					}
				}
			}
			if (option.myinvitationcode) {
				this.Invitation_code = option.myinvitationcode;
				this.isdisbale = true;
			}
			console.log(this.Invitation_code)
		},
		methods: {
			tabChange(item) {
				if (item.index == 0) {
					uni.navigateTo({
						url: '/pages/public/login'
					})
				}
			},
			navBack() {
				uni.navigateBack()
			},
			//发送验证码
			sendValide() {
				let phoneReg = /^1[3456789]\d{9}$/
				console.log(this.phone)
				if (!phoneReg.test(this.phone)) {
					this.$api.msg('手机号码输入错误！')
					return
				}
				let that = this
				sendValidaCode({
					data: {
						phone: that.phone
					},
					success: (res) => {
						that.$api.msg('验证码发送成功！')
					}

				})
			},
			// 表单验证stpOne
			inputBlur(e) {
				let key = e.currentTarget.dataset.name;
				this[key] = e.detail.value
			},
			// 提交修改密码
			confirm() {
				console.log(this.Invitation_code)
				console.log(this.allow)
				if (!this.allow) {
					return
				}
				let that = this
				that.allow = false
				if (this.inType == 'reset') {
					that.$Request.request('/api/user_center/changeLoginPwd', 'POST', {
						oldPwd: that.oldPwd,
						newPwd: that.newPwd
					}).then(res => {
						if (res.status == 1) {
							that.allow = true
							that.$api.msg('密码修改成功，请重新登录！')
							uni.clearStorageSync()
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/public/login'
								})
							}, 800)
						}

					}).catch(err => {
						that.allow = true
						console.log(err)
					})
				} else if (that.inType == 'forget') {
					that.$Request.request('/api/user_center/resetLoginPwd', 'POST', {
						code: that.code,
						loginPwd: that.newPwd
					}, true).then(res => {
						if (res.status == 1) {
							that.allow = true
							that.$api.msg('密码修改成功，请重新登录！')
							uni.clearStorageSync()
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/public/login'
								})
							}, 800)
						}else{
              that.$api.msg(res.msg)
            }

					}).catch(err => {
            that.$api.msg(err || err.msg)
            console.log(err)
					})
				} else if (that.inType == 'regist') {
					that.$Request.request('/api/users/register', 'POST', {
						code: that.code,
						phone: that.phone,
						loginPwd: that.newPwd,
						parentUserInviteCode: that.Invitation_code
					}).then(res => {
						if (res.status == 1) {
							that.allow = true
							that.$api.msg('注册成功')
							setTimeout(()=>{
								let userInfo = {
									loginName: that.phone,
									token: res.data.token,
								}
								uni.setStorageSync('userInfo', userInfo)
								uni.switchTab({
									url: '/pages/index/index'
								})								
							},1500)
						}else{
								that.allow = true
						}

					}).catch(err => {
						that.allow = true
						console.log(err)
					})
				}

			}
		}
	}
</script>

<style lang="scss">
	.container {
		padding-top: 115px;
		position: relative;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		background: #fff;
		background-image: url('https://www.ggshop1688.com/upload/api-img/bg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;

		.back-btn {
			position: absolute;
			left: 40upx;
			z-index: 9999;
			padding-top: var(--status-bar-height);
			top: 40upx;
			font-size: 40upx;
			color: #fff;
		}

		.wrapper {
			position: relative;
			background: #fff;
			width: 680rpx;
			margin: 0 auto;
			border-radius: 10rpx;
			padding: 33rpx;
			padding-top: 100rpx;
			box-shadow: 0 0 5rpx rgba(#fd5004, 0.6);

			.logoImg {
				width: 180rpx;
				height: 180rpx;
				border-radius: 50%;
				border: 8rpx solid #fc6912;
				position: absolute;
				left: 250rpx;
				top: -80rpx;
			}
		}
	}

	.tabsContent {
		padding: 40rpx 0;
	}

	.confirmBtm {
		width: 630upx;
		height: 76upx;
		line-height: 76upx;
		border-radius: 50px;
		margin-top: 70upx;
		background: #ff8e32;
		color: #fff;
		font-size: $font-lg;
		text-align: center;

		&:after {
			border-radius: 100px;
		}
	}

	.codeSendCon {
		display: flex;
		justify-content: flex-end;

		.sendcode {
			color: #fff;
			background-color: #ff8e32;
			padding: 10rpx 10rpx;
			border-radius: 8rpx;
		}
	}

	.inputRow {
		padding: 30rpx 0;
		@extend %flexBetw;
		font-size: 26rpx;

		.invokeLable {
			width: 30%;
		}

		.invokeInput {
			width: 70%;
			height: 50rpx;
			background-color: #f8f8f8;
			border-radius: 8rpx;
			@extend %flexVcenter;
		}

		.inputContain {
			width: 88%;
			height: 50rpx;
			background-color: #f8f8f8;
			border-radius: 8rpx;
			@extend %flexVcenter;
		}



		.countDown {
			width: 180rpx;
			text-align: center;
			font-size: 22rpx;


		}


	}
  .back{
    width: 100%;
    height: 76rpx;
    line-height: 76rpx;
    text-align: center;
    margin-top: 20rpx;
    font-size: 30rpx;
    //background: #f1f1f1;
    //border-radius: 50px;
    color: #4399fc;
  }
</style>
